<template>
  <div class="hello">
    <el-input class="input" v-model="URL" placeholder="请输入内容"></el-input>
    <h1>{{ msg }}</h1>
    <el-button type="primary" v-on:click="TTS" plain>开始转换</el-button>
    <div>
      <audio
        ref="audio"
        @pause="onPause"
        @play="onPlay"
        v-bind:src="voice" controls="controls"></audio>
    </div>

  </div>
</template>

<script>
export default {
  name: 'TTS',
  data () {
    return {
      audio: {
        // 该字段是音频是否处于播放状态的属性
        playing: false
      },
      msg: '欢迎使用URL转语音助手',
      URL: '',
      voice:'',
    }
  },
  methods: {
    TTS:function(){
      this.$axios.get("http://localhost:8080/UTVC/UTVC",{
        params:{
          url:this.URL,
        }
      }).then((res) => {
        if(res.data == ""){
          alert("抱歉，暂不支持该网址的转换，请检查您的网址！！")
        }else{
          this.voice="http://localhost:8080/"+res.data.src
        }
      }).catch(() => {})

    },
    // 播放音频
    play () {
      this.$refs.audio.play()
    },
    // 暂停音频
    pause () {
      this.$refs.audio.pause()
    },
    // 当音频播放
    onPlay () {
      this.audio.playing = true
    },
    // 当音频暂停
    onPause () {
      this.audio.playing = false
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input{
  width:300px;
}
</style>
